<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title th:text="${siteTitle}">网站导航</title>

    <!-- 引入外部资源 -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
          rel="stylesheet"/>
    <link rel="shortcut icon" th:href="@{../ico/favicon.ico}"/>

    <style>
        /* 全局样式 */
        :root {
            --primary-color: #008cff;
            --secondary-color: #4CAF50;
            --accent-color: #ff6b6b;
            --light-bg: #f8f9fa;
            --dark-text: #343a40;
            --light-text: #ffffff;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--dark-text);
            background-color: #f5f7fa;
            line-height: 1.6;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.8rem 1rem;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color) !important;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar-brand i {
            font-size: 1.8rem;
        }

        .nav-link {
            color: var(--dark-text) !important;
            font-weight: 500;
            margin: 0 0.5rem;
            position: relative;
            transition: var(--transition);
        }

        .nav-link:hover {
            color: var(--primary-color) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            transition: var(--transition);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* 下拉菜单样式 */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            border: none;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 0.5rem 0;
            transition: var(--transition);
            min-width: 280px;
            margin-top: 8px;
        }

        .dropdown-item {
            padding: 0.75rem 1.5rem;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .dropdown-item i {
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
        }

        .dropdown-item:hover {
            background-color: var(--light-bg);
            color: var(--primary-color);
            transform: translateX(5px);
        }

        /* 下拉菜单激活状态 */
        .dropdown-toggle::after {
            transition: transform 0.3s ease;
        }

        .dropdown.show .dropdown-toggle::after {
            transform: rotate(180deg);
        }

        /* 内容区域样式 */
        .container {
            padding: 2rem 0;
        }

        .section-title {
            text-align: center;
            margin: 2.5rem 0 1.5rem;
            position: relative;
            padding-bottom: 1rem;
        }

        .section-title h5 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark-text);
            display: inline-block;
            background-color: #f5f7fa;
            padding: 0 1rem;
            position: relative;
            z-index: 1;
        }

        .section-divider {
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
            margin-top: -0.75rem;
            border-radius: 2px;
        }

        /* 卡片容器 - 限制每行卡片数量（核心优化） */
        .card-group {
            display: flex;
            flex-wrap: wrap; /* 强制换行：超出一行自动折行 */
            gap: 1.5rem; /* 卡片之间的间距（上下左右统一） */
            justify-content: center; /* 整体水平居中，避免最后一行左对齐的空隙 */
            margin-bottom: 2rem;
            /* 容器最大宽度：避免屏幕过宽时卡片被拉得太开 */
            max-width: 1400px;
            margin-left: auto; /* 配合max-width实现容器水平居中 */
            margin-right: auto;
        }

        /* 单张卡片 - 动态宽度控制（关键） */
        .card {
            /* flex-basis：控制卡片的“基准宽度”，决定一行能放几张 */
            /* 计算逻辑：(100% - 间距总和) / 每行卡片数 → 确保卡片大小均匀 */
            flex-basis: calc((100% - 3rem) / 2); /* 手机端：每行2张（间距1.5rem × 1个间隙） */
            min-width: 280px; /* 卡片最小宽度：避免屏幕过窄时卡片被挤压变形 */
            max-width: 350px; /* 卡片最大宽度：避免屏幕过宽时卡片过大 */
            border: none;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            background-color: white;
            opacity: 0;
            transform: translateY(20px);
            display: flex;
            flex-direction: column; /* 保持卡片内部上下布局 */
        }

        /* 平板端（768px以上）：每行3张卡片 */
        @media (min-width: 768px) {
            .card {
                flex-basis: calc((100% - 4.5rem) / 3); /* 3张卡片有2个间隙 → 1.5rem × 3 = 4.5rem */
            }
        }

        /* 电脑端（992px以上）：每行4张卡片 */
        @media (min-width: 992px) {
            .card {
                flex-basis: calc((100% - 6rem) / 4); /* 4张卡片有3个间隙 → 1.5rem × 4 = 6rem */
            }
        }

        /* 大屏电脑（1200px以上）：可微调为每行5张（可选，根据需求决定） */
        @media (min-width: 1200px) {
            .card {
                flex-basis: calc((100% - 7.5rem) / 5); /* 5张卡片有4个间隙 → 1.5rem × 5 = 7.5rem */
            }
        }
        /* 卡片图片 - 适配新卡片高度，避免拉伸 */
        .card-img-top {
            height: 180px; /* 比原220px略低，配合更紧凑的布局（可根据需求调整） */
            object-fit: cover; /* 核心：图片按比例填充，不拉伸变形 */
            object-position: center; /* 确保图片核心内容不被裁剪 */
            transition: transform 0.5s ease;
            width: 100%; /* 强制图片占满卡片宽度 */
        }

        /* 无图占位区 - 与图片高度保持一致，避免卡片高度错位 */
        .no-image-container {
            height: 180px; /* 和.card-img-top高度相同 */
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f5ff;
            position: relative;
        }

        /* 卡片文字区域 - 控制文字行数，避免卡片高度不一致 */
        .card-body {
            padding: 1.2rem;
            text-align: center;
            flex: 1; /* 让文字区域自动填充剩余空间，确保同组卡片高度统一 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-text {
            font-weight: 500;
            color: var(--dark-text);
            margin-bottom: 0;
            font-size: 1.05rem;
            line-height: 1.4;
            /* 关键：限制文字最多2行，超出部分省略，避免卡片高度不一致 */
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 最多2行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 分类标题下方间距优化 */
        .category-section {
            margin-bottom: 3rem; /* 每个分类区域之间留出足够空隙 */
        }

        .section-title {
            text-align: center;
            margin: 2.5rem 0 2rem; /* 增加标题下方间距，与卡片拉开距离 */
            position: relative;
            padding-bottom: 1rem;
        }
        .stretched-link {
            text-decoration: none;
        }

        /* 右侧快捷按钮 */
        .quick-links {
            display: flex;
            gap: 0.5rem;
        }

        .quick-link {
            background-color: var(--primary-color);
            color: white !important;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 500;
            transition: var(--transition);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .quick-link:hover {
            background-color: #007bff;
            transform: translateY(-2px);
        }

        /* 页脚样式 */
        footer {
            background-color: var(--primary-color);
            color: white;
            padding: 2rem 0 1rem;
            margin-top: 3rem;
        }

        .footer-content {
            text-align: center;
        }

        .footer-content p {
            margin-bottom: 0.5rem;
        }

        .copyright {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-top: 1rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem;
            }

            .card {
                width: 100%;
                max-width: 280px;
            }

            .quick-links {
                margin-top: 1rem;
                justify-content: center;
            }

            .dropdown-menu {
                min-width: auto;
                width: 100%;
            }
        }
    </style>
</head>
<body>
<!-- 导航栏 - 修复下拉菜单循环逻辑 -->
<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <i class="bi bi-building"></i>
            <span th:text="${siteTitle}">网站导航</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <!-- 修复核心：只在最外层循环分类，下拉菜单内直接使用当前分类的navMap数据 -->
                <li class="nav-item dropdown" th:each="category : ${categories}">
                    <a class="nav-link dropdown-toggle" href="#"
                       th:id="'dropdown-' + ${category.id}"
                       role="button"
                       data-bs-toggle="dropdown"
                       aria-expanded="false">
                        <span th:text="${category.name}">分类名称</span>
                    </a>
                    <!-- 下拉菜单：只渲染当前分类（外层th:each的category）对应的导航项 -->
                    <ul class="dropdown-menu"
                        th:aria-labelledby="'dropdown-' + ${category.id}">  <!-- 关联当前分类的下拉按钮 -->
                        <!-- 1. 跳转到当前分类的页面区域 -->
                        <li>
                            <a class="dropdown-item" th:href="'#category-' + ${category.id}">
                                <i class="bi bi-list"></i>
                                <span>查看全部 [[${category.name}]]</span>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <!-- 2. 当前分类下的所有导航项（关键：使用navMap.get(category.id)，只取当前分类数据） -->
                        <li th:each="nav : ${navMapNoImage.get(category.id)}">
                            <a class="dropdown-item" th:href="${nav.url}" target="_blank">
                                <i class="bi bi-link-45deg"></i>
                                <span th:text="${nav.title}">导航标题</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>

            <!-- 快捷链接 -->
<!--            <div class="quick-links">-->
<!--                <a th:href="@{/image/地理图片.png}" download="地理图片.png" class="quick-link">-->
<!--                    <i class="bi bi-download"></i> bat下载-->
<!--                </a>-->
<!--                <a th:href="@{/image/地理图片.png}" download="地理图片.png" class="quick-link">-->
<!--                    <i class="bi bi-image"></i> 地理图片-->
<!--                </a>-->
<!--            </div>-->
        </div>
    </div>
</nav>

<!-- 主要内容区域 - 分类卡片布局（保持不变，逻辑正确） -->
<div class="container">
    <div th:each="category : ${categories}">
        <div class="category-section" th:id="'category-' + ${category.id}">
            <div class="section-title">
                <h5 th:text="${category.name}">分类名称</h5>
                <div class="section-divider"></div>
            </div>

            <div class="card-group">
                <div class="card" th:each="nav : ${navMapAndImage.get(category.id)}">
                    <a th:href="${nav.url}" target="_blank" class="stretched-link">
                        <!-- 有图时显示图片 -->
                        <img th:if="${nav.imageUuid != null and not #strings.isEmpty(nav.imageUuid)}"
                             th:src="@{/image/{uuid}(uuid=${nav.imageUuid})}"
                             th:alt="${nav.title} + '的封面图'"
                             class="card-img-top"
                             loading="lazy"
                             onError="this.onerror=null; this.parentElement.innerHTML='<div class=\'no-image-container\'><i class=\'bi bi-compass\'></i></div>'"/>
                        <!-- 无图时显示占位区域 -->
                        <div th:unless="${nav.imageUuid != null and not #strings.isEmpty(nav.imageUuid)}"
                             class="no-image-container">
                            <i class="bi bi-compass"></i>
                        </div>
                        <div class="card-body">
                            <p class="card-text" th:text="${nav.title}">导航标题</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>
</div>

<!-- 页脚 -->
<footer>
    <div class="container footer-content">
        <p><i class="bi bi-building"></i> <span th:text="${siteTitle}">网站导航</span></p>
        <div class="copyright">
            &copy; 2025 版权所有
        </div>
    </div>
</footer>

<!-- Scripts -->
<script th:src="@{/js/jQuery.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>

<script>
    // 1. 下拉菜单中的"查看全部"点击事件：平滑滚动+关闭下拉菜单
    document.querySelectorAll('.dropdown-item[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            // 关闭当前下拉菜单（避免点击后菜单仍展开）
            const dropdownEl = this.closest('.dropdown');
            const dropdownToggleEl = dropdownEl.querySelector('.dropdown-toggle');
            const dropdownInstance = bootstrap.Dropdown.getInstance(dropdownToggleEl);
            if (dropdownInstance) dropdownInstance.hide();

            // 平滑滚动到目标分类区域
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetEl = document.querySelector(targetId);
            if (targetEl) {
                window.scrollTo({
                    top: targetEl.offsetTop - 100, // 偏移100px，避免被导航栏遮挡
                    behavior: 'smooth'
                });
            }
        });
    });

    // 2. 滚动时高亮当前分类的导航按钮
    window.addEventListener('scroll', function () {
        const sections = document.querySelectorAll('.category-section');
        const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
        let currentCategoryId = '';

        // 找到当前可视区域的分类
        sections.forEach(section => {
            const sectionTop = section.offsetTop - 150;
            const sectionBottom = sectionTop + section.offsetHeight;
            if (window.scrollY >= sectionTop && window.scrollY < sectionBottom) {
                currentCategoryId = section.getAttribute('id').replace('category-', '');
            }
        });

        // 高亮当前分类的导航按钮
        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.id === `dropdown-${currentCategoryId}`) {
                link.classList.add('active');
            }
        });
    });

    // 3. 页面加载+滚动时的卡片动画
    $(document).ready(function () {
        // 卡片滚动渐入动画
        function animateCardsOnScroll() {
            $('.card').each(function () {
                const cardTop = $(this).offset().top;
                const windowBottom = $(window).scrollTop() + $(window).height();
                // 当卡片顶部进入视口底部100px内时，触发动画
                if (cardTop < windowBottom - 100) {
                    $(this).css({
                        opacity: '1',
                        transform: 'translateY(0)',
                        transition: 'all 0.5s ease forwards'
                    });
                }
            });
        }

        // 初始加载时执行一次（显示首屏卡片）
        animateCardsOnScroll();
        // 滚动时持续检测
        $(window).scroll(animateCardsOnScroll);

        // 页面加载完成后触发一次滚动高亮
        window.dispatchEvent(new Event('scroll'));
    });
</script>
</body>
</html>
